<html xmlns="http://www.w3.org/1999/xhtml">
<head th:replace="fragments/common :: head" />
<body>
    <div class="portletBody">

        <div class="page-header">
            <h1 th:text="#{mainTitle}">Reset your password</h1>
        </div>

        <div class="sak-banner-info d-none" id="email-sent-msg"></div>

        <div th:if="${placement != null}" id="instructions">
            <p class="sak-banner-info" th:if="${placement.getConfig().getProperty('instructions') != ''}" th:utext="${placement.getConfig().getProperty('instructions')}">Instructions from tool properties</p>
        </div>
        <div th:unless="${placement != null}" id="instructions">
            <p class="sak-banner-info" th:text="#{mainText(${uiService})}">This password service is only available for guest users on {0}.</p>
        </div>

        <div class="sak-banner-info" id="instructionInfo" th:text="${explanation}">Upon submission, an email will be sent to you containing a link where you can securely set your password. You will have 1 hour before this link expires.</div>
        <div class="sak-banner-error d-none" id="error-msg">Error message</div>

        <form id="emailForm">
            <div  class="row">
                <div class="col-xs-12">
                    <b th:text="#{formLabel}">Your email address: </b>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
                    <p></p>
                    <input id="mailInput" class="form-control" type="email" oninput="enableButton()" placeholder="mail@example.com" required/>
                </div>
                <div class="col-xs-12 col-sm-5">
                    <p></p>
                    <button id="sendBtn" th:if="${validatingAccounts}" type="submit" th:text="#{postForm2}" class="btn" disabled>Request Password Change</button>
                    <button id="sendBtn" th:unless="${validatingAccounts}" type="submit" th:text="#{postForm}" class="btn" disabled>Send Password</button>
                </div>
                <div class="col-xs-12">
                    <p></p>
                </div>
            </div>
        </form>

        <div class="sak-banner-info d-none" id="support-msg">If you do not receive the email or you need further assistance, please contact Sakai support.</div>
    </div>
    
    <script>

        function enableButton() {
            var email = document.getElementById('mailInput').value;
            var sendBtn = document.getElementById('sendBtn');
            var regexForEmail = /\S+@\S+\.\S\S+/;

            if (regexForEmail.test(email)) {
                sendBtn.disabled = false;
                sendBtn.classList.add("btn-primary");
            } else {
                sendBtn.disabled = true;
                sendBtn.classList.remove("btn-primary");
            }
        };

        document.getElementById('emailForm').addEventListener('submit', function(e) {
            e.preventDefault();

        var email = document.getElementById('mailInput').value;
        var sendBtn = document.getElementById('sendBtn');

            if (email !== "") {
                sendBtn.disabled = true;
                sendBtn.classList.add("spinButton");
            }

        fetch(window.location.href.split('?')[0] + '/formsubmit', {
            headers: { 'Content-Type': 'application/json' },
            method: 'POST',
            body: email.trim()
        })
            .then(function(response) {

                if (!response.ok) {
                    throw response;
                }
                    return response.json().then(function (response) {

                        var sendBtn = document.getElementById('sendBtn');
                        sendBtn.disabled = false;
                        sendBtn.classList.remove("spinButton");

                        var instructionsBtn = document.getElementById('instructions');
                        var infoMsg = document.getElementById('instructionInfo');
                        var errorMsg = document.getElementById('error-msg');
                        var emailSentMsg = document.getElementById('email-sent-msg');
                        var supportMsg = document.getElementById('support-msg');

                        if (response.error_msg !== undefined) {
                            infoMsg.classList.remove("d-none");
                            instructionsBtn.classList.remove("d-none");
                            emailSentMsg.classList.add("d-none");
                            supportMsg.classList.add("d-none");
                            errorMsg.classList.remove("d-none");
                            var message = response.error_msg;
                            errorMsg.textContent = message;
                        }

                        if (response.exception_msg !== undefined) {
                            infoMsg.classList.add("d-none");
                            instructionsBtn.classList.add("d-none");
                            errorMsg.classList.add("d-none");
                            emailSentMsg.classList.remove("d-none");
                            var message = response.exception_msg;
                            emailSentMsg.innerHTML = message;
                        }

                        if (response.email_sent_msg !== undefined) {
                            infoMsg.classList.add("d-none");
                            instructionsBtn.classList.add("d-none");
                            emailSentMsg.classList.remove("d-none");
                            errorMsg.classList.add("d-none");   
                            var message = response.email_sent_msg;
                            emailSentMsg.textContent = message;
                        }

                        if (response.support_msg !== undefined) {
                            infoMsg.classList.add("d-none");
                            instructionsBtn.classList.add("d-none");
                            supportMsg.classList.remove("d-none");
                            errorMsg.classList.add("d-none");

                            var message = response.support_msg;
                            supportMsg.innerHTML = message;

                            if (response.support_mail !== undefined){
                                var mail = response.support_mail;
                                var a = document.createElement('a');

                                a.textContent = mail;
                                a.href = "mailto:"+mail;
                                supportMsg.appendChild(a);
                            }
                        }
                    });
            });
        });

    </script>
</body>
</html>
